{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Interval Selection Example\n",
    "==========================\n",
    "\n",
    "This is an example of creating a stacked chart for which the domain of the\n",
    "top chart can be selected by interacting with the bottom chart.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# category: interactive\n",
    "\n",
    "import altair as alt\n",
    "alt.data_transformers.enable('json')\n",
    "from vega_datasets import data\n",
    "sp500 = data.sp500.url\n",
    "\n",
    "brush = alt.selection(type='interval', encodings=['x'])\n",
    "\n",
    "upper = alt.Chart().mark_area().encode(\n",
    "    alt.X('date:T', scale={'domain': brush.ref()}),\n",
    "    y='price:Q'\n",
    ").properties(\n",
    "    width=600,\n",
    "    height=200\n",
    ")\n",
    "\n",
    "lower = upper.properties(\n",
    "    selection=brush,\n",
    "    height=60\n",
    ")\n",
    "\n",
    "alt.vconcat(upper, lower, data=sp500)\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "env": {},
   "interrupt_mode": "signal",
   "language": "python",
   "metadata": {},
   "name": "python3"
  },
  "language": "python"
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
